<template>
  <div class="sidebar">
    <el-scrollbar class="scrollbar-wrapper" ref="scrollbarWrapper">
      <el-menu
        :default-active="activeMenu"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
        @open="menuChange"
        @close="menuChange"
      >
        <sidebar-item

          v-for="route in system_list"
          :key="route.path"
          :item="route"
          :base-path="route.path"
          @menuClick="menuClick"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import SidebarItem from "./SidebarItem";
export default {
  data () {
    return {
      variables: {
        menuBg: "#f6f9fc",
        menuText: "#333",
        menuActiveText: "red"
      }
    };
  },
  components: {
    SidebarItem
  },
  computed: {
    ...mapGetters(["system_list"]),
    activeMenu() {
      const route = this.$route;
      console.log(route);
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    }
  },
  methods: {
    menuClick(item) {
      console.log(item);
      this.$nextTick(() => {
        this.$refs.scrollbarWrapper.update();
      });
    },
    menuChange() {
      this.$nextTick(() => {
        this.$refs.scrollbarWrapper.update();
      });
    }
  },
  mounted() {
    console.log(this.system_list);
    this.$nextTick(() => {
      this.$refs.scrollbarWrapper.update();
    });
  }
};
</script>
<style lang="less" scoped>
.sidebar{
  height: calc(100% - 300px);
}
.scrollbar-wrapper{
  height: 100%;
  /deep/ .el-scrollbar__wrap{
    overflow-x: hidden;
  }
}
</style>
